<template>
  <div id="artists-page">
    <div class="search">
      <h3>
        查找歌手:
        <el-input
          v-model="input"
          style="width: 240px; margin: 0 1em 0 1em"
          placeholder="请输入作者姓名"
        />
        <el-button
          type="success"
          @click="search()"
          >搜索
        </el-button>
        <el-button
          type="primary"
          @click="
            () => {
              input = ''
              initArtists()
            }
          "
          >重置
        </el-button>
      </h3>
    </div>
    <div class="thread"></div>
    <div class="artist-content">
      <ArtistItem
        v-for="(item, index) in artists"
        :key="index"
        :artistVO="item"
      ></ArtistItem>
    </div>
    <div class="page">
      <el-pagination
        class="page"
        layout="prev, pager, next"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        @update:current-page="
          () => {
            artists = cutArtist(resArtists, currentPage, pageSize)
          }
        "
        :total="resArtists.length"
        :size="'large'"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, ref } from 'vue'
import type { ArtistVO } from '@/types/song'
import { getArtistListAPI } from '@/services/songService.ts'
import type { UnifyResponse } from '@/types/result'
import ArtistItem from '@components/ArtistItem.vue'

const input = ref('')
const resArtists = ref<ArtistVO[]>([])
const artists = ref<ArtistVO[]>([])
const currentPage = ref(1)
const pageSize = ref(5)

const initArtists = async (input?: string) => {
  try {
    const res: UnifyResponse<ArtistVO[]> = await getArtistListAPI(input)
    resArtists.value = res.data || []
    artists.value = cutArtist(resArtists.value)
  } catch (e) {
    console.error(e)
  }
}

const cutArtist = (artists: ArtistVO[], page?: number, size?: number) => {
  if (artists.length === 0) return []
  if (page && size) {
    return artists.slice((page - 1) * size, page * size)
  } else return artists.slice(0, 5)
}

const search = async () => {
  if (input.value.trim() === '') return
  try {
    const res: UnifyResponse<ArtistVO[]> = await getArtistListAPI(input.value.trim())
    resArtists.value = res.data || []
    artists.value = cutArtist(resArtists.value)
  } catch (e) {
    console.error(e)
  }
}

onBeforeMount(() => {
  initArtists()
})
</script>

<style scoped>
#artists-page {
  width: 60rem;
  height: 90vh;
  margin: 1em auto 0;
  background-color: rgb(219, 255, 233, 0.6);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
}

.search {
  height: 5em;
  line-height: 5em;
  margin-left: 1em;
}

.thread {
  height: 0.5em;
  background-color: rgba(87, 156, 255, 0.5);
}

.artist-content {
  width: 100%;
  flex-grow: 1;
  padding: 1em;
}

.page {
  margin: 2em auto;
}

.page:deep(.el-pagination button) {
  background-color: transparent;
}

.page:deep(.el-pager li) {
  background-color: transparent;
}
</style>
